<template>
  <div class="year-section" :id="'year-' + year" :data-year="year">
    <!-- 年份侧边标记 -->
    <div class="year-label">
      <div class="year-text">{{ year }}</div>
      <div class="year-count">{{ getYearItemCount(year) }}篇</div>
    </div>

    <!-- 时间轴内容 -->
    <div class="timeline-content">
      <!-- 单个文章项 -->
      <TimelineItem v-for="item in getItemsByYear(year)" :key="item.id" :item="item" />

      <!-- 年份无内容提示 -->
      <div v-if="getItemsByYear(year).length === 0" class="empty-year">暂无文章</div>
    </div>
  </div>
</template>

<script setup>
import TimelineItem from './TimelineItem.vue'

const props = defineProps({
  year: {
    type: Number,
    required: true,
  },
  timelineItems: {
    type: Array,
    required: true,
  },
})

// 获取指定年份下的文章
const getItemsByYear = (year) => {
  return props.timelineItems
    .filter((item) => new Date(item.date).getFullYear() === year)
    .sort((a, b) => new Date(b.date) - new Date(a.date)) // 按日期降序排序
}

// 获取年份下文章数量
const getYearItemCount = (year) => {
  return getItemsByYear(year).length
}

defineOptions({ name: 'YearSection' })
</script>

<style lang="scss" scoped>
.year-section {
  position: relative;
  margin-bottom: 4rem;
  padding-top: 5rem; // 增加顶部间距，防止遮挡

  &:last-child {
    margin-bottom: 0;
  }

  // 年份侧边标记
  .year-label {
    position: sticky; // 保持粘性定位
    top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start; // 改为左对齐
    height: 0;
    z-index: 10;
    pointer-events: none;
    margin-top: -5rem; // 添加负边距，抵消padding-top

    .year-text {
      background: var(--color-primary);
      color: white;
      font-size: 1.25rem;
      font-weight: 700;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      box-shadow: 0 3px 8px rgba(81, 138, 255, 0.25);
      margin-bottom: 0.25rem;
      position: relative; // 修改为相对定位
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    }

    .year-count {
      font-size: 0.75rem;
      color: var(--text-secondary);
      background-color: var(--bg-base);
      padding: 0.125rem 0.5rem;
      border-radius: 1rem;
      position: relative; // 修改为相对定位
      font-weight: 500;
      border: 1px solid var(--border-base);
      transition: transform 0.3s ease;
    }
  }

  // 时间轴内容
  .timeline-content {
    position: relative;
    padding-left: 5rem;
    margin-top: 0;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 3rem;
      width: 1px;
      background: var(--border-base);
    }

    // 无匹配内容提示
    .empty-year {
      text-align: center;
      margin-top: 1rem;
      padding: 2rem;
      font-size: 0.875rem;
      color: var(--text-secondary);
      border: 1px dashed var(--border-base);
      border-radius: 0.75rem;
      background-color: var(--bg-light);
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .year-section {
    margin-bottom: 2.5rem;
    padding-top: 4rem; // 调整移动端的顶部空间

    .year-label {
      top: 5.5rem; // 增加顶部距离，避免被导航栏遮挡
      margin-top: -4rem; // 对应调整

      .year-text {
        font-size: 1rem;
        padding: 0.375rem 0.75rem;
        border-radius: 0.375rem;
      }

      .year-count {
        font-size: 0.7rem;
        padding: 0.1rem 0.375rem;
        margin-top: 0.25rem;
      }
    }

    .timeline-content {
      padding-left: 3.5rem; // 减少左侧缩进

      &::before {
        left: 1.75rem; // 调整垂直线位置
      }
    }
  }
}

@media (max-width: 480px) {
  .year-section {
    padding-top: 3.5rem; // 小屏幕上进一步调整

    .year-label {
      top: 5rem; // 增加顶部距离，避免被导航栏遮挡
      margin-top: -3.5rem; // 对应调整

      .year-text {
        padding: 0.3rem 0.625rem;
        font-size: 0.9375rem;
      }

      .year-count {
        font-size: 0.65rem;
        top: 1.875rem;
      }
    }

    .timeline-content {
      padding-left: 2.5rem;

      &::before {
        left: 1rem;
      }
    }
  }
}

// 暗色模式适配
:deep(html.dark) {
  .year-section {
    .year-label {
      .year-text {
        box-shadow: 0 4px 16px rgba(81, 138, 255, 0.3);
      }

      .year-count {
        background-color: var(--bg-light);
        border-color: rgba(255, 255, 255, 0.1);
      }
    }

    .timeline-content {
      .empty-year {
        background-color: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.1);
      }
    }
  }
}

// 滚动时的交互效果
.year-section {
  // 添加滚动时的年份交互
  scroll-margin-top: 5rem;
  transition: opacity 0.5s ease;

  // 移动端滚动边距调整
  @media (max-width: 768px) {
    scroll-margin-top: 6rem; // 增加移动端的滚动边距
  }

  @media (max-width: 480px) {
    scroll-margin-top: 5.5rem; // 小屏幕的滚动边距
  }

  &.active {
    .year-label {
      .year-text {
        transform: scale(1.1);
        box-shadow: 0 6px 14px rgba(81, 138, 255, 0.4);
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
      }
      .year-count {
        transform: translateY(0);
        border-color: var(--color-primary);
      }
    }
  }

  &:target {
    .year-label {
      .year-text {
        transform: scale(1.1);
        box-shadow: 0 6px 14px rgba(81, 138, 255, 0.4);
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
      }
      .year-count {
        transform: translateY(0);
        border-color: var(--color-primary);
      }
    }
  }

  // 滚动位置变化时的过渡效果
  .timeline-content {
    :deep(.timeline-item) {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.5s ease forwards;

      @for $i from 1 through 10 {
        &:nth-child(#{$i}) {
          animation-delay: #{$i * 0.1}s;
        }
      }
    }
  }
}

// 滑入动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
